<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="aaton">
    
    <title>
        
            Vue之v-for列表渲染 |
        
        aaton&#39;s study notes
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    
<link rel="stylesheet" href="/font/css/fontawesome.min.css">

    
<link rel="stylesheet" href="/font/css/regular.min.css">

    
<link rel="stylesheet" href="/font/css/solid.min.css">

    
<link rel="stylesheet" href="/font/css/brands.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {}
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"en"}
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066cc","logo":"/images/logo.svg","favicon":"/images/logo.svg","avatar":"/images/avatar.svg","font_size":null,"font_family":null,"hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"header_transparent":true,"background_img":"/images/bg.svg","description":"Keep writing and Keep loving.","font_color":null,"hitokoto":true},"scroll":{"progress_bar":false,"percent":false}},"local_search":{"enable":false,"preload":false},"code_copy":{},"code_block":{"tools":{"enable":true,"style":"default"},"highlight_theme":"default"},"side_tools":{},"pjax":{"enable":false},"lazyload":{"enable":false},"comment":{"enable":false,"use":"valine","valine":{"appid":null,"appkey":null,"server_urls":null,"placeholder":null},"gitalk":{"github_id":null,"github_admins":null,"repository":null,"client_id":null,"client_secret":null,"proxy":null},"twikoo":{"env_id":null,"region":null,"version":"1.6.8"},"waline":{"server_url":null,"reaction":false,"version":2}},"post":{"author_label":{"enable":true,"auto":true,"custom_label_list":["Trainee","Engineer","Architect"]},"word_count":{"enable":true,"wordcount":true,"min2read":true},"img_align":"left","copyright_info":false},"version":"3.6.1"}
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"}
    KEEP.language_code_block = {"copy":"Copy code","copied":"Copied","fold":"Fold code block","folded":"Folded"}
    KEEP.language_copy_copyright = {"copy":"Copy copyright info","copied":"Copied","title":"Original article title","author":"Original article author","link":"Original article link"}
  </script>
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            
<header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
                <a class="logo-image" href="/">
                    <img src="/images/logo.svg">
                </a>
            
            <a class="logo-title" href="/">
               aaton&#39;s study notes
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                HOME
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                ARCHIVES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                TAGS
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                CATEGORIES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                ABOUT
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">HOME</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">ARCHIVES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">TAGS</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">CATEGORIES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">ABOUT</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="post-page-container">
        <div class="article-content-container">

            <div class="article-title">
                <span class="title-hover-animation">Vue之v-for列表渲染</span>
            </div>

            
                <div class="article-header">
                    <div class="avatar">
                        <img src="/images/avatar.svg">
                    </div>
                    <div class="info">
                        <div class="author">
                            <span class="name">aaton</span>
                            
                                <span class="author-label">Lv3</span>
                            
                        </div>
                        <div class="meta-info">
                            
<div class="article-meta-info">
    <span class="article-date article-meta-item">
        
            <i class="fa-regular fa-calendar-plus"></i>&nbsp;
        
        <span class="pc">2023-06-05 11:00:11</span>
        <span class="mobile">2023-06-05 11:00</span>
    </span>
    
        <span class="article-update-date article-meta-item">
        <i class="fas fa-file-pen"></i>&nbsp;
        <span class="pc">2023-05-11 19:15:19</span>
    </span>
    
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/Vue3/">Vue3</a>&nbsp;
                    </li>
                
                    <li>
                        &gt; <a href="/categories/Vue/">Vue</a>&nbsp;
                    </li>
                
                    <li>
                        &gt; <a href="/categories/Vue2/">Vue2</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/v-for/">v-for</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fas fa-file-word"></i>&nbsp;<span>1.9k Words</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fas fa-clock"></i>&nbsp;<span>8 Mins</span>
        </span>
    
    
        <span class="article-pv article-meta-item">
            <i class="fas fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                        </div>
                    </div>
                </div>
            

            <div class="article-content keep-markdown-body">
                

                <p><img src="https://cn.bing.com/th?id=OHR.ThreeWildebeest_ZH-CN0175563521_1920x1080.webp&qlt=50" alt="bing.com-马赛马拉的角马，肯尼亚" title="bing.com-马赛马拉的角马，肯尼亚"></p>
<p>Vue中列表渲染的定义、使用方法与注意事项。</p>
<span id="more"></span>

<h1 id="1-基本用法"><a href="#1-基本用法" class="headerlink" title="1.基本用法"></a>1.基本用法</h1><p><code>v-for</code>允许我们在模版代码中编写for循环，这使我们在碰到诸如以下情况时特别好用：</p>
<ul>
<li>渲染数组或列表</li>
<li>遍历对象属性</li>
</ul>
<p>在<code>v-for</code>块中可以完整地访问父作用域内的属性和变量。<code>v-for</code>也支持<strong>使用可选的第二个参数表示当前项的位置索引</strong>。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">js:</span><br><span class="line">const parentMessage = ref(&#x27;Parent&#x27;)</span><br><span class="line">const items = ref([&#123; message: &#x27;Foo&#x27; &#125;, &#123; message: &#x27;Bar&#x27; &#125;])</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">template:</span><br><span class="line">&lt;li v-for=&quot;(item, index) in items&quot;&gt;</span><br><span class="line">  &#123;&#123; parentMessage &#125;&#125; - &#123;&#123; index &#125;&#125; - &#123;&#123; item.message &#125;&#125;</span><br><span class="line">&lt;/li&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>输出：<br>Parent - 0 - Foo<br>Parent - 1 - Bar</p>
</blockquote>
<p>对于多层嵌套的<code>v-for</code>，作用域的工作方式和函数的作用域很类似。<strong>每个<code>v-for</code>作用域都可以访问到父级作用域</strong>。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;li v-for=&quot;item in items&quot;&gt;</span><br><span class="line">  &lt;span v-for=&quot;childItem in item.children&quot;&gt;</span><br><span class="line">    &#123;&#123; item.message &#125;&#125; &#123;&#123; childItem &#125;&#125;</span><br><span class="line">  &lt;/span&gt;</span><br><span class="line">&lt;/li&gt;</span><br></pre></td></tr></table></figure>

<p>你也可以在定义<code>v-for</code>的变量名时使用<mark><strong>解构</strong></mark>，和解构函数参数类似。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;li v-for=&quot;&#123; message &#125; in items&quot;&gt;</span><br><span class="line">  &#123;&#123; message &#125;&#125;</span><br><span class="line">&lt;/li&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 有 index 索引时 --&gt;</span><br><span class="line">&lt;li v-for=&quot;(&#123; message &#125;, index) in items&quot;&gt;</span><br><span class="line">  &#123;&#123; message &#125;&#125; &#123;&#123; index &#125;&#125;</span><br><span class="line">&lt;/li&gt;</span><br></pre></td></tr></table></figure>

<p>你也可以使用of作为分隔符来替代in，这更接近Javascript的<strong>迭代器</strong>语法。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;div v-for=&quot;item of items&quot;&gt;&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<hr>
<h3 id="1-v-for遍历数组"><a href="#1-v-for遍历数组" class="headerlink" title="(1).v-for遍历数组"></a>(1).v-for遍历数组</h3><p>大多数情况下，我们使用<code>v-for</code>指令基于一个数组来渲染一个列表。<code>v-for</code>指令的值需要使用<code>item in items</code> 形式的特殊语法，其中<code>items</code>是源数据的数组，而<code>item</code>是迭代项的别名。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">js:</span><br><span class="line">const items = ref([&#123; message: &#x27;Foo&#x27; &#125;, &#123; message: &#x27;Bar&#x27; &#125;])</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">template:</span><br><span class="line">&lt;li v-for=&quot;item in items&quot;&gt;</span><br><span class="line">  &#123;&#123; item.message &#125;&#125;</span><br><span class="line">&lt;/li&gt;</span><br></pre></td></tr></table></figure>

<hr>
<h3 id="2-v-for循环对象"><a href="#2-v-for循环对象" class="headerlink" title="(2).v-for循环对象"></a>(2).v-for循环对象</h3><p>你也可以使用<code>v-for</code>来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用<code>Object.keys()</code>的返回值来决定。</p>
<p>例如：</p>
<p>info: {<br>                name: ‘aaton’,<br>                age: 18,<br>                height: 1.88<br>            }</p>
<ul>
<li>在遍历对象的过程中，如果只是获取一个值，那么获取到的是value</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line"> &lt;li v-for=&quot;item in info&quot;&gt;&#123;&#123;item&#125;&#125;&lt;/li&gt;</span><br><span class="line">&lt;/ul&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>输出：<br>aaton<br>18<br>1.88</p>
</blockquote>
<ul>
<li>获取<strong>key和value</strong>格式 (value,key)</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line"> &lt;li v-for=&quot;(value,key) in info&quot;&gt;&#123;&#123;value&#125;&#125;-&#123;&#123;key&#125;&#125;&lt;/li&gt;</span><br><span class="line">&lt;/ul&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>输出：<br>name-aaton<br>age-18<br>height:1.88</p>
</blockquote>
<ul>
<li>获取<strong>key和value和index</strong>格式 (value,key,index)</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line"> &lt;li v-for=&quot;(value,key,index) in info&quot;&gt;&#123;&#123;value&#125;&#125;-&#123;&#123;key&#125;&#125;-&#123;&#123;index&#125;&#125;&lt;/li&gt;</span><br><span class="line">&lt;/ul&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>输出：<br>name-aaton-0<br>age-18-1<br>height-1.88-2</p>
</blockquote>
<hr>
<h3 id="3-在v-for里使用范围值"><a href="#3-在v-for里使用范围值" class="headerlink" title="(3).在v-for里使用范围值"></a>(3).在v-for里使用范围值</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--v-for 循环一个迭代数字--&gt;</span><br><span class="line">&lt;span v-for=&quot;n in 10&quot;&gt;&#123;&#123; n &#125;&#125;&lt;/span&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>输出：<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</p>
</blockquote>
<p><strong>注意此处n的初始值为1，而非0。</strong></p>
<hr>
<h1 id="2-注意事项"><a href="#2-注意事项" class="headerlink" title="2.注意事项"></a>2.注意事项</h1><h3 id="1-不推荐将v-for和v-if在同一级使用，因为这样二者的优先级不明显"><a href="#1-不推荐将v-for和v-if在同一级使用，因为这样二者的优先级不明显" class="headerlink" title="(1).不推荐将v-for和v-if在同一级使用，因为这样二者的优先级不明显"></a>(1).不推荐将<code>v-for</code>和<code>v-if</code>在同一级使用，因为这样二者的优先级不明显</h3><p>当<code>v-for</code>和<code>v-if</code>同时存在于一个节点上时，<u><code>v-if</code>比<code>v-for</code>的优先级更高</u>。这意味着<code>v-if</code>的条件将无法访问到<code>v-for</code>作用域内定义的变量别名。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--</span><br><span class="line"> 这会抛出一个错误，因为属性 todo 此时</span><br><span class="line"> 没有在该实例上定义</span><br><span class="line">--&gt;</span><br><span class="line">&lt;li v-for=&quot;todo in todos&quot; v-if=&quot;!todo.isComplete&quot;&gt;</span><br><span class="line">  &#123;&#123; todo.name &#125;&#125;</span><br><span class="line">&lt;/li&gt;</span><br></pre></td></tr></table></figure>

<p>在外新包装一层<code>&lt;template&gt;</code>再在其上使用<code>v-for</code>可以解决这个问题 (这也更加明显易读)。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;template v-for=&quot;todo in todos&quot;&gt;</span><br><span class="line">  &lt;li v-if=&quot;!todo.isComplete&quot;&gt;</span><br><span class="line">    &#123;&#123; todo.name &#125;&#125;</span><br><span class="line">  &lt;/li&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<hr>
<h3 id="2-推荐在v-for使用中添加key"><a href="#2-推荐在v-for使用中添加key" class="headerlink" title="(2).推荐在v-for使用中添加key"></a>(2).推荐在v-for使用中添加key</h3><p>绑定key的作用主要是<strong>高效地更新虚拟DOM</strong>。</p>
<p>Vue默认按照“就地更新”的策略来更新通过<code>v-for</code>渲染的元素列表。当数据项的顺序改变时，Vue不会随之移动DOM元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。</p>
<p>默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时DOM状态(例如表单输入值)的情况。</p>
<p>为了给Vue一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一<code>key</code>。如果我们对每个元素都有<strong>唯一的键引用</strong>，那么就可以更好更准确地操作DOM。避免出现乱序甚至其他不可测的行为。</p>
<p><code>key</code>绑定的值期望是一个基础类型的值，例如<code>字符串</code>或<code>number</code>类型。<u>不要用对象作为<code>v-for</code>的<code>key</code></u>。</p>
<hr>
<h3 id="3-数据量大的数组中，应避免直接使用v-for和v-if组合"><a href="#3-数据量大的数组中，应避免直接使用v-for和v-if组合" class="headerlink" title="(3).数据量大的数组中，应避免直接使用v-for和v-if组合"></a>(3).数据量大的数组中，应避免直接使用v-for和v-if组合</h3><p>假设商品中有上千条数据，但只有三个在售状态，则每次渲染时都需要重新遍历这上千条数据；或者有时我们只希望显示数组经过过滤或排序后的内容，而<strong>不实际变更或重置原始数据</strong>，你可以创建返回已过滤或已排序数组的<strong>计算属性</strong>。</p>
<ul>
<li>使用computed属性</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;ul&gt;</span><br><span class="line">    &lt;li v-for=&quot;products in productsOnSale&quot; :key=&quot;product._id&quot;&gt;</span><br><span class="line">      &#123;&#123; product.name &#125;&#125;</span><br><span class="line">    &lt;/li&gt;</span><br><span class="line">  &lt;/ul&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data () &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        products: []</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    computed: &#123;</span><br><span class="line">      productsOnSale: function () &#123;</span><br><span class="line">        return this.products.filter(product =&gt; product.onSale)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>使用过滤方法（在计算属性不可行的情况下 (例如在多层嵌套的 v-for 循环中)）</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;ul&gt;</span><br><span class="line">    &lt;li v-for=&quot;products in productsOnSale(50))&quot; :key=&quot;product._id&quot;&gt;</span><br><span class="line">      &#123;&#123; product.name &#125;&#125;</span><br><span class="line">    &lt;/li&gt;</span><br><span class="line">  &lt;/ul&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">   data () &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">     products: []</span><br><span class="line">    &#125;</span><br><span class="line">   &#125;,</span><br><span class="line">   methods: &#123;</span><br><span class="line">    productsOnSale (maxPrice) &#123;</span><br><span class="line">     return this.products.filter(product =&gt; product.onSale &amp;&amp; product.price &lt; maxPrice)</span><br><span class="line">    &#125;</span><br><span class="line">   &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<hr>
<h3 id="4-数组数据变化侦测"><a href="#4-数组数据变化侦测" class="headerlink" title="(4).数组数据变化侦测"></a>(4).数组数据变化侦测</h3><ul>
<li><p>变更方法</p>
<ul>
<li><p>push()      –向数组尾部添加元素</p>
</li>
<li><p>pop()       –去除数组最后一个元素</p>
</li>
<li><p>shift()     –去除数组第一个元素</p>
</li>
<li><p>unshift()   –向数组头部添加元素</p>
</li>
<li><p>splice()    –数组倒序</p>
</li>
<li><p>sort()      –数组排序（默认是从小到大）</p>
</li>
<li><p>reverse()   –向&#x2F;从数组中添加&#x2F;删除项目</p>
</li>
</ul>
</li>
<li><p>不可变 (immutable) 方法</p>
<ul>
<li><p>filter()    –创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素</p>
</li>
<li><p>concat()    –用于连接两个或多个字符串</p>
</li>
<li><p>slice()     –从已有的数组中返回选定的元素</p>
</li>
</ul>
</li>
</ul>
<p><strong>变更方法</strong>，就是会对调用它们的原数组进行变更；<strong>不可变方法</strong>则不会改变原始数组，而是返回一个新数组。</p>
<p>Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。Vue实现了一些巧妙的方法来最大化对DOM元素的<strong>重用</strong>，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作。</p>
<hr>
<p><em><strong>本文参考文献：</strong></em></p>
<p><em><strong><a class="link"   target="_blank" rel="noopener" href="https://cn.vuejs.org/guide/essentials/list.html" >Vue.js官方文档 ： 列表渲染<i class="fas fa-external-link-alt"></i></a></strong></em></p>
<p><em><strong><a class="link"   target="_blank" rel="noopener" href="https://blog.csdn.net/m0_46613429/article/details/119300801" >CSDN ： vue的循环遍历(v-for)<i class="fas fa-external-link-alt"></i></a></strong></em></p>
<p><em><strong><a class="link"   target="_blank" rel="noopener" href="https://blog.csdn.net/qq_39239110/article/details/87822878" >CSDN ： v-for的四种使用方法<i class="fas fa-external-link-alt"></i></a></strong></em></p>
<p><em><strong><a class="link"   target="_blank" rel="noopener" href="https://juejin.cn/post/7046930510307655711" >稀土掘金 ：编写 Vue v-for 循环更优雅的 7 种方式<i class="fas fa-external-link-alt"></i></a></strong></em></p>

            </div>

            

            
                <ul class="post-tags-box">
                    
                        <li class="tag-item">
                            <a href="/tags/v-for/">#v-for</a>&nbsp;
                        </li>
                    
                </ul>
            

            
                <div class="article-nav">
                    
                        <div class="article-prev">
                            <a class="prev"
                               rel="prev"
                               href="/2023/06/05/Vue%E4%B9%8Bv-if%E4%B8%8Ev-show/"
                            >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                                <span class="title flex-center">
                                <span class="post-nav-title-item">Vue之v-if与v-show</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                            </a>
                        </div>
                    
                    
                        <div class="article-next">
                            <a class="next"
                               rel="next"
                               href="/2023/06/05/Vue3%E4%B9%8B%E7%BB%84%E5%90%88%E5%BC%8FAPI%E4%B8%8E%E5%93%8D%E5%BA%94%E5%BC%8FAPI/"
                            >
                            <span class="title flex-center">
                                <span class="post-nav-title-item"></span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                                <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                            </a>
                        </div>
                    
                </div>
            

            
        </div>

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            
<footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
                <span>2020</span> -
            
            2024
            
                &nbsp;<i class="fas fa-heart icon-animate"></i>
                &nbsp;<a href="/">aaton</a>
            
        </div>
        
            <script async 
                    src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <div class="website-count info-item">
                
                    Visitor Count&nbsp;<span id="busuanzi_value_site_uv"></span>&ensp;
                
                
                    Totalview&nbsp;<span id="busuanzi_value_site_pv"></span>
                
            </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.6.1</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    <div class="zoom-in-image-mask">
    <img class="zoom-in-image">
</div>


    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>







    
<script src="/js/code-block.js"></script>





<div class="post-scripts">
    
        
<script src="/js/post-helper.js"></script>

        
        
    
</div>



</body>
</html>
